import React from 'react';
import _ from 'lodash';
import { useModel, history } from 'umi';
import logo from '@/assets/images/logo.png';
import defaultSettings from '@/../config/defaultSettings';
import appDescription from '@/../package.json';
import './index.less';

export default ({ collapsed, textColor, systemTextWidth }) => {
  const { initialState } = useModel('@@initialState');
  const { defaultUrl } = initialState;

  return (
    <div
      className="ant-pro-sider-logo system-logo-item-style"
      style={{ cursor: defaultUrl ? 'pointer' : 'default' }}
      onClick={() => {
        if (defaultUrl) {
          history.push(defaultUrl);
        }
      }}
    >
      <img
        src={logo}
        alt="logo"
        style={{
          display: 'inline-block',
          width: '28px',
          height: '28px',
          margin: '2px 0',
          verticalAlign: 'middle',
        }}
      />
      {collapsed === false && (
        <h1
          style={_.assign(
            {
              width: systemTextWidth ? `${systemTextWidth}px` : 'unset',
              fontWeight: 500,
              fontSize: '17px',
              lineHeight: '32px',
              verticalAlign: 'middle',
              overflow: 'hidden',
              whiteSpace: 'nowrap',
              textOverflow: 'ellipsis',
              letterSpacing: '1px',
            },
            textColor ? { color: textColor } : {},
          )}
        >
          {defaultSettings.title || appDescription.name || ''}
        </h1>
      )}
    </div>
  );
};
